import React, { useState } from 'react';
import { Flex, Layout, Menu, theme } from 'antd';
import { Link } from 'react-router-dom';
// import Link from "@/components/Link";
import LogoDemo from './LogoDemo';
import FunctionCollection from './FunctionCollection';

const { Header } = Layout;

const items1 = [
    {
        key: '1',
        label: (
            <Link to="/home">Home</Link>
        ),
    },
    {
        key: '2',
        label: <Link to="test">System</Link>,

    },
    {
        key: '3',
        label: <Link to="test1">Playground</Link>
    }
]
const SysHeader = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    return <Header
        style={{
            padding: 0,
            background: colorBgContainer,
        }}
    >
        <Flex>
            <LogoDemo />
            <Menu
                mode="horizontal"
                // defaultSelectedKeys={['2']}
                items={items1}
                style={{
                    flex: 1,
                    minWidth: 0,
                }}
            />
            <FunctionCollection />
        </Flex>
    </Header>
}

export default SysHeader